<template>
  <div>
    <v-chart class="chart" :option="option" style="width:800px" />
  </div>
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { defineComponent } from "vue";

use([
  CanvasRenderer,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  LineChart,
]);

export default defineComponent({
  name: "HelloWorld",
  data() {
    return {
      option: null,
    };
  },
  components: {
    VChart,
  },
  props: ["detail"],
  provide: {
    [THEME_KEY]: "white",
  },
  watch: {
    detail(newvalue) {
      if (newvalue) {
        this.option = {
          xAxis: {
            name: "时长区间",
            type: "category",
            boundaryGap: false,
            data: Object.keys(newvalue),
          },
          yAxis: {
            name: "人数",
            type: "value",
          },
          toolbox: {
            show: true,
            orient: "vertical",
            left: "right",
            // top: "center",
            feature: {
              // mark: {show: true},
              // dataView: { show: true, readOnly: false, Text: "数据视图" },
              // magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              // restore: {show: true},
              saveAsImage: { show: true },
            },
          },
          series: [
            {
              data: Object.values(newvalue),
              type: "line",
              areaStyle: {},
            },
          ],
        };
      }
    },
  },
  created() {
    console.log(this.props);
  },
});
</script>
<style>
.chart {
  height: 400px;
}
</style>
